<template>
  <view-page>
    <div class="bg"></div>

    <div class="container">
      <div class="header-title">仪器预约</div>
      <div class="desc">我们为您提供智能、高效、开放、安全的检测服务</div>

      <SearchInput placeholder="搜索检测项目" />
      <DeviceListCard />
    </div>
    <CardView />
    <FooterView />
  </view-page>
</template>

<script setup>
import SearchInput from './SearchInput.vue'
import DeviceListCard from './DeviceListCard'
import CardView from '@/components/Footer/CardView'
import FooterView from '@/components/Footer/FooterView.vue';


</script>

<style scoped lang="scss">

.container {
  position: relative;
  z-index: 1;
  .header-title {
    margin: dpi(12rem) 0 dpi(4rem) 0;
    font-family: PingFangSC-Semibold;
    text-align: center;
    font-size: dpi(4rem);
    color: #ffffff;
  }
  .desc {
    text-align: center;
    font-family: PingFangSC-Regular;
    font-size: dpi(2rem);
    color: #7fcfe2;
  }
}
</style>
